<template>
  <div>
    <el-dialog v-model="visible" title="添加用户" width="800">
      <el-form :model="form">
        <el-form-item label="名字">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="submit"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, defineExpose, defineEmits } from 'vue'

const visible = ref(false)
const dialogType = ref('')
const form = ref({})
const open = (type, row) => {
  console.log('🚀 ~ open ~ type, row:', type, row)
  visible.value = true
  dialogType.value = type
  if (row) {
    form.value = JSON.parse(JSON.stringify(row))
  }
}

const emit = defineEmits(['submit'])
const submit = () => {
  console.log('🚀 ~ submit ~ form.value:', form.value)
  console.log('🚀 ~ submit ~ type.value:', dialogType.value)
  emit('changeList', { row: {name:form.value.name,age:form.value.age}, type: dialogType.value })

  close()
}

const close = () => {
  visible.value = false
  form.value.name = ''
  form.value.age = 0
}
defineExpose({
  open,
})
</script>

<style lang="scss" scoped></style>
